<template>
	<view class="ContactPerson">
		<uni-search-bar v-if="showTips" placeholder="请输入手机号进行查询" style="background-color: #fff;"
			@confirm="searchConfirm">
		</uni-search-bar>
		<uni-forms v-else style="background-color: #fff;padding: 20rpx;" ref="baseForm" :modelValue="formData">
			<view class="remark">
				账号信息
			</view>
			<uni-forms-item label="姓名">
				<uni-easyinput disabled v-model="formData.Name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="手机号">
				<uni-easyinput disabled v-model="formData.Phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<view class="remark">
				备注信息
			</view>
			<uni-forms-item label="昵称">
				<uni-easyinput v-model="formData.NickName" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="性别">
				<!-- <uni-easyinput v-model="formData.Sex" placeholder="请输入性别" /> -->
				<view style="height: 100%;display: flex;align-items: center;">
					<radio-group @change="radioChange" style="display: flex;">
						<view>
							<radio value="男" :checked="formData.Sex === '男'" />男
						</view>
						<view style="margin-left: 10px;">
							<radio value="女" :checked="formData.Sex === '女'" />女
						</view>
					</radio-group>
				</view>
			</uni-forms-item>
			<uni-forms-item label="公司">
				<uni-easyinput v-model="formData.Company" placeholder="请输入公司" />
			</uni-forms-item>
			<uni-forms-item label="邮箱">
				<uni-easyinput v-model="formData.Email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item label="地址">
				<uni-easyinput v-model="formData.Address" placeholder="请输入地址" />
			</uni-forms-item>
			<uni-forms-item label="备注">
				<uni-easyinput v-model="formData.Remarks" type="textarea" autoHeight placeholder="请输入备注" />
			</uni-forms-item>
			<view>
				<uni-row :gutter="15" style="width: 100%;text-align: center;" v-if="btnShow">
					<uni-col span="12"><button type="primary" @click="save">保存</button></uni-col>
					<uni-col span="12"><button type="warn" @click="del">删除</button></uni-col>
				</uni-row>
				<uni-row style="width: 100%;text-align: center;" v-if="!btnShow">
					<uni-col span="24"><button type="primary" @click="save">保存</button></uni-col>
				</uni-row>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {},
				showTips: true,
				btnShow: false
			}
		},
		onLoad(query) {
			console.log('传递过来的参数', query);
			if (query.data) {
				this.showTips = false
				this.btnShow = true
				this.formData = JSON.parse(query.data)
			}
		},
		methods: {
			back() {
				uni.showToast({
					icon: 'none',
					title: '操作成功',
					mask: true
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			// 删除
			del() {
				uni.showModal({
					title: '提示',
					content: '此操作将删除当前用户,确认继续吗?',
					success: (val) => {
						if (val.cancel) return
						this.$http('Base_Mail/Base_MailList/MailListDeleteData', [this.formData.Id]).then(
							res => {
								console.log(res);
								if (res.Success) this.back()
								else uni.showToast({
									icon: 'none',
									title: res.Msg
								})
							})
					}
				})
			},
			radioChange(e) {
				console.log(e);
				this.formData.sex = e.detail.value
			},
			// 保存
			save() {
				uni.showLoading({
					mask: true
				})
				this.formData.UserId = uni.getStorageSync('userInfo').Id
				this.$http('Base_Mail/Base_MailList/SaveData', this.formData).then(res => {
					uni.hideLoading()
					if (res.Success) this.back()
					else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			searchConfirm(e) {
				console.log(e.value);
				uni.showLoading({
					mask: true
				})
				this.$http('Base_Mail/Base_MailList/GetVIPUserInfoData?Phone=' + e.value).then(res => {
					uni.hideLoading()
					if (res.Success && res.Data) {
						this.showTips = false
						let {
							Name,
							Phone,
							Icon,
							Id: MailUserId
						} = {
							...res.Data
						};
						this.formData = {
							Name,
							Phone,
							Icon,
							MailUserId,
						};
					} else {
						uni.showToast({
							icon: 'none',
							title: '未查询到用户'
						})
					}
				})
				console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.ContactPerson {
		width: 100%;
		background-color: #f4f4f4;

		.Empty {
			font-size: 32rpx;
			text-align: center;
			color: #999;
			padding-top: 20px;
		}

		.remark {
			font-weight: bold;
			font-size: 32rpx;
			margin: 20px 0;
		}

	}
</style>